﻿@{
    ViewBag.Title = "Default";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>Default</h2>
<a href="#login-container" class="link-entrar" rel="nofollow">Entrar</a>&nbsp;
<a href="/usuario/cadastro" rel="nofollow" class="link-cadastro">Cadastre-se</a> 

<br/>
<form action="/" method="post">
    <input type="text" id="endereco" class="input-home-endereco" autocomplete="off" placeholder="Digite a cidade/bairro onde deseja procurar Gás de Cozinha." />
    <input type="submit" />
</form>

<script type="text/javascript">
    $(document).ready(function () {
        $("#endereco").catcomplete({
            source: function (request, response) {
                $.ajax({
                    url: "endereco/filtro",
                    contentType: "application/json; charset=utf-8",
                    type: "POST",
                    dataType: "json",
                    data: "{ 'parametro':'" + request.term + "'}",
                    success: function (data) {
                        response($.map(data, function (item) {
                            return {
                                label: item.bairro + " - " + item.cidade,
                                value: item.bairro,
                                category: item.categoria
                            };
                        }));
                    }
                });
            },
            minLength: 1
        });
    });
</script>

<script>
    $.widget("custom.catcomplete", $.ui.autocomplete, {
        _renderMenu: function (ul, items) {
            var that = this,
              currentCategory = "";
            $.each(items, function (index, item) {
                if (item.category != currentCategory) {
                    ul.append("<li class='ui-autocomplete-category'>" + item.category + "</li>");
                    currentCategory = item.category;
                }
                that._renderItemData(ul, item);
            });
        }
    });
</script>